<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" title="添加推荐" width="1000px">
            <el-form :model="form">
                <el-form-item label="类型">
                    <template>
                        <el-radio v-model="form.type" label="hot">正在热播</el-radio>
                        <el-radio v-model="form.type" label="latest">最新推荐</el-radio>
                    </template>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <el-card body-style="padding:10px" class="box-card">
            <!-- <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.keyword"></el-input> -->
            <el-input clearable placeholder="请输入用户ID" class="marginBottom" size="small" style="width: 200px;"
                v-model="query.user_id"></el-input>
            <el-input clearable placeholder="请输入用户名" class="marginBottom" size="small" style="width: 200px;"
                v-model="query.user_name"></el-input>
            <el-input clearable placeholder="请输入名称" class="marginBottom" size="small" style="width: 200px;"
                v-model="query.name"></el-input>
            <el-input clearable placeholder="请输入描述" class="marginBottom" size="small" style="width: 200px;"
                v-model="query.desc"></el-input>
            <el-input clearable placeholder="请输入演员" class="marginBottom" size="small" style="width: 200px;"
                v-model="query.actor"></el-input>
            <el-select placeholder="选择类型" class="marginBottom" v-model="query.suggest_type">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
            </el-select>

            <el-cascader :options="options" :props="props" clearable placeholder="请选择作品分类" collapse-tags
                @change="category_idFun"></el-cascader>

            <!-- <span style="color: #555;margin-left: 30px;margin-right: 10px;">是否已删除</span>
            <el-switch @change="disableFun" active-color="#13ce66" inactive-color="#ff4949" v-model="disable"></el-switch> -->

            <el-select placeholder="选择是否已删除" v-model="query.contain_delete" @change="page = 1; init()">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in statusList"></el-option>
            </el-select>
            <el-button @click="page = 1; init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="toRecommend" size="small" type="success"
                v-permission="['ADMIN', 'COLLECTIONS_RECOMMEND']">管理推荐</el-button>
            <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary"
                style="margin-left: 2px;">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="collection_id"></el-table-column>
                <el-table-column label="用户ID" prop="user_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author_info" v-if="scope.row.user_id">
                        </UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="图片" prop="thumbnail">
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.thumbnail"
                            :preview-src-list="toArray(scope.row.thumbnail)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="集数" prop="episodes"></el-table-column>
                <el-table-column label="更新集数" prop="current_episode"></el-table-column>
                <el-table-column label="作品分类" prop="categorys">
                    <template slot-scope="scope">
                        <div>
                            <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in scope.row.categorys"
                                :key="index">
                                {{ item.name }} </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="推荐类型" prop="suggest_info">
                    <template slot-scope="scope" v-if="scope.row.suggest_info">
                        <el-tag v-if="scope.row.suggest_info.type == 'hot'" type="warning">正在热播</el-tag>
                        <el-tag v-else-if="scope.row.suggest_info.type == 'latest'" type="success">最新推荐</el-tag>
                        <el-tag v-else type="danger"></el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                            @click="toDetails(scope.row.collection_id)"
                            v-permission="['ADMIN', 'COLLECTION_DETAILS']">详情</el-button>
                        <el-button @click="addRecommend(scope.row.collection_id)" size="small" type="primary"
                            style="margin-left: 10px;">添加推荐</el-button> -->
                        <el-dropdown>
                            <el-button type="primary">
                                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-permission="['ADMIN', 'LONG_VIDEOS_DETAILS']">
                                    <el-button @click="toDetails(scope.row.collection_id)" size="small" type="success"
                                        style="margin-left: 10px;margin-top: 10px;">详情</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'LONG_VIDEOS_REC']">
                                    <el-button @click="addRecommend(scope.row.collection_id)" size="small" type="primary"
                                        style="margin-left: 10px;margin-top: 10px;">推荐</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'LONG_VIDEOS_UPDATE']">
                                    <el-button @click="updateRecommend(scope.row)" size="small" type="primary"
                                        style="margin-left: 10px;margin-top: 10px;">修改</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'LONG_VIDEOS_FALSE_DELETE']">
                                    <el-popconfirm @confirm="softDel(scope.row.collection_id)" title="确定要删除这个数据吗？"
                                        v-if="query.contain_delete == 0">
                                        <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                                            type="danger">软删除</el-button>
                                    </el-popconfirm>
                                    <el-button v-else @click="restore(scope.row.collection_id)" size="small" type="primary"
                                        style="margin-left: 10px;margin-top: 10px;">恢复</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-permission="['ADMIN', 'LONG_VIDEOS_TRUE_DELETE']">
                                    <el-popconfirm @confirm="hardDel(scope.row.collection_id)" title="删除之后将无法恢复，确定要删除这个数据吗？"
                                        v-if="query.contain_delete == 0">
                                        <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                                            type="danger">硬删除</el-button>
                                    </el-popconfirm>
                                </el-dropdown-item>
                                <!-- <el-dropdown-item>
                                    <el-button @click="hardDel(scope.row.collection_id)" size="small" 
                                        type="danger" style="margin-left: 10px;margin-top: 10px;">硬删除</el-button>
                                </el-dropdown-item> -->

                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name: "long-video-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    watch: {
        '$route'(to, from) {
            console.log('路由参数发生变化')
            if (this.$route.query.name) {
                this.query.user_name = this.$route.query.name
            }
            this.beforeInit()
        }
    },
    data() {
        return {
            query: {
                name: '',
                desc: '',
                actor: '',
                suggest_type: '',
                category_id: [],
                contain_delete: 0, //0未删除，2已删除
                user_id: '',
                user_name: ''
            },
            statusList: [
                {
                    name: "未删除",
                    value: 0
                },
                {
                    name: "已删除",
                    value: 2
                },
            ],
            visible: false,
            loading: false,
            disable: false,
            images: [],
            props: { multiple: true, children: 'childrens', value: 'id', label: 'name', checkStrictly: true },
            typeList: [
                {
                    name: '正在热播',
                    value: 'hot',
                },
                {
                    name: '最新推荐',
                    value: 'latest',
                }
            ],
            form: {
                collection_ids: [], //合集ID
                type: '',//'hot','latest' 正在热播 最新推荐
            },
            options: [],
        }
    },
    mounted() {
        if (this.$route.query.name) {
            this.query.user_name = this.$route.query.name
        }
        this.beforeInit()
        this.getworksList()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        beforeInit() {
            this.url = '/creation-collection/index'
            this.init() //重新请求数据
        },

        disableFun(res) {
            console.log(res, '321')
            this.query.contain_delete = res == true ? 2 : 0
            this.init() //重新请求数据
        },
        imagesFun(images) {
            this.visible = true
            this.images = images
            console.log(images)
        },
        closeBox() {
            this.visible = false
        },
        softDel(id) {
            this.$request.del('/creation-collection/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },
        restore(id) {
            this.$request.put('/creation-collection/delete_soft_recover/' + id).then((res) => {
                this.$message.success('恢复成功')
                this.init()
            })
        },

        hardDel(id) {
            this.$request.del('/creation-collection/delete_real/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        toDetails(id) {
            this.$router.push({ path: "/long-video-details?id=" + id });
        },

        toRecommend(id) {
            this.$router.push({ path: "/long-video/recommend?id=" + id });
        },

        addRecommend(id) {
            this.visible = true
            this.form.collection_ids.push(id)
        },

        updateRecommend(e) {
            this.$router.push({ path: "/add-collection?id=" + e.collection_id + '&type=update' + '&user_id=' + e.user_id });
        },
        getworksList() {
            let that = this
            this.$request.get('/creation-category/index', { type: 'search' }).then((res) => {
                this.options = res
            })
        },

        category_idFun(e) {
            this.query.category_id = []
            for (let i = 0; i < e.length; i++) {
                for (let j = 0; j < e[i].length; j++) {
                    if (this.query.category_id.indexOf(e[i][j]) == -1) {
                        this.query.category_id.push(e[i][j])
                    }
                }
            }
            console.log(e)
            console.log(this.query.category_id)
        },

        //提交
        submit() {
            if (!(this.form.type && this.form.collection_ids.length > 0)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                return
            }

            this.$request.post('/creation-collection/create_batch', this.form).then((res) => {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                this.init() //重新请求数据
                this.closeBox()

            })



        },
    }
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}</style>